<template>
  <div class="page page-about-wrapper">
    <el-timeline>
      <el-timeline-item :timestamp="item.label" placement="top" v-for="(item,Index) in plugsList" :key="Index">
        <el-row :gutter="20">
          <el-col :xl="3" :lg="4" :md="4" :sm="8" :xs="12" v-for="(child,index) in item.list" :key="index" class="vs-col">
            <el-card>
              <a :href="child.link" :title="child.name" target="_blank" class="row-a">{{ child.name }}</a>
              <p class="desc" :title="child.desc">{{ child.desc }}</p>
            </el-card>
          </el-col>
        </el-row>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
const plugsList = [
  {
    label: '编码辅助',
    list: [
      { name: 'Preview.js', desc: '一个用于项目中组件实时预览的插件', link: 'https://marketplace.visualstudio.com/items?itemName=zenclabs.previewjs' },
      { name: 'CodeTour', desc: 'CodeTour 允许记录和回放代码库的演练和思路。我们通过代码注释或者文档来解释某段代码或方法的功能及逻辑，这样相对简便，但是对阅读的人不够友好，CodeTour 允许我们为代码添加备注，并且将这些备注串联起来，动态地展示我们的思路以及代码逻辑。', link: 'https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour' },
      { name: 'node-snippets', desc: '在 js 文件中只需要输入 node 就可以看到一系列的 nodejs 代码片段。例如 express 、http、koa 模块的基本代码。', link: 'https://marketplace.visualstudio.com/items?itemName=chris-noring.node-snippets' },
      { name: 'Live Server', desc: '为静态和动态页面启动具有实时重新加载功能的开发本地服务器', link: 'https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer' },
      { name: 'Auto Close Tag', desc: '自动闭合 HTML/XML 标签', link: 'https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag' },
      { name: 'Auto Rename Tag', desc: '自动重命名 HTML/XML 标签', link: 'https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag' },
      { name: 'Autoprefixer', desc: '解析CSS并自动添加前缀', link: 'https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer' },
      { name: 'Bracket Pair Colorizer', desc: '用于着色匹配括号，让你的代码分层更清晰', link: 'https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2' },
      { name: 'Code Runner', desc: '运行代码片段或多种语言的代码文件', link: 'https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner' },
      { name: 'Code Spell Checker', desc: '源代码拼写检查器，提示代码中单词拼写错误', link: 'https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker' },
      { name: 'CSS Peek', desc: '允许查看css，并从HTML文件定位到css文件，文件定义跳转', link: 'https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek' },
      { name: 'DotENV', desc: '支持.env文件语法，高亮显示', link: 'https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv' },
      { name: 'ESLint', desc: '代码格式校验工具，配合项目中的校验规则，实现保存时格式化代码，开发必备，你值得拥有！', link: 'https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint' },
      { name: 'Highlight Matching Tag', desc: '突出显示匹配的标签', link: 'https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag' },
      { name: 'Import Cost', desc: '在编辑器中展示引用包的大小，让你更了解你引入的包', link: 'https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost' },
      { name: 'Javascript console utils', desc: '帮助你更快速的添加console和删除console，确实方便。', link: 'https://marketplace.visualstudio.com/items?itemName=whtouche.vscode-js-console-utils' },
      { name: 'koroFileHeader', desc: '在vscode中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言,功能强大，灵活方便，文档齐全，使用简单！', link: 'https://marketplace.visualstudio.com/items?itemName=OBKoro1.korofileheader' },
      { name: 'npm Intellisense', desc: '代码插件，在导入语句中自动完成NPM模块代码插件，在导入语句中自动完成NPM模块', link: 'https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense' },
      { name: 'Prettier', desc: '非常喜欢的一款代码格式化工具，在项目中也可以配置自己的规则', link: 'https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode' },
      { name: 'Todo Tree', desc: '快速搜索编辑器中添加的标签，如todo和fixme，并在资源管理器窗格中的树视图中显示。单击树中的todo将打开文件并将光标放在包含TODO的行上。', link: 'https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree' },
      { name: 'Trailing Spaces', desc: '突出显示尾随空格并快速删除它们！', link: 'https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces' },
      { name: 'volar', desc: '与vetur相同，volar是一个针对vue的vscode插件，支持.vue文件的语法支持、高亮显示、格式校验、错误检测等，不过与vetur不同的是，volar提供了更为强大的功能', link: 'https://marketplace.visualstudio.com/items?itemName=Vue.volar' },
      { name: 'any-rule', desc: '你要的"正则"都在这!', link: 'https://marketplace.visualstudio.com/items?itemName=russell.any-rule' },
      { name: 'FnMap(付费)', desc: '人性化的侧边栏函数、变量、符号列表操作和展示', link: 'https://marketplace.visualstudio.com/items?itemName=chensuiyi.fn-map' },
      { name: 'wakatime', desc: '编程时间及行为跟踪统计', link: 'https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime' },
      { name: 'Codelf', desc: '变量起名神器', link: 'https://marketplace.visualstudio.com/items?itemName=unbug.codelf' },
      { name: 'Regex Previewer', desc: '正则表达式预览', link: 'https://marketplace.visualstudio.com/items?itemName=chrmarti.regex' },
    ]
  },
  {
    label: 'Ai工具', list: [
      { name: 'github copilot', desc: 'GitHub Copilot 是一款 AI 编程工具，可帮助您更快地编写代码并减少工作量。 GitHub Copilot 从评论和代码中提取上下文，并立即建议单个行和整个函数。', link: 'https://marketplace.visualstudio.com/items?itemName=GitHub.copilot' },
      { name: 'CodeGeeX', desc: '代码自动生成和补全、代码翻译、自动添加注释', link: 'https://marketplace.visualstudio.com/items?itemName=aminer.codegeex' },
      { name: 'ChatGPT-ChatMoss（CodeMoss）', desc: 'ChatGPT_支持4.0_无需翻墙_更多开发者功能适配_设置key无限制使用', link: 'https://marketplace.visualstudio.com/items?itemName=zhukunpeng.chat-moss' },
      { name: 'IntelliCode', desc: '这个插件使用人工智能来提供智能代码提示和自动补全功能，根据你的编码习惯和上下文为你推荐代码片段。', link: 'https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode' },
      { name: 'Tabnine', desc: 'tabnine 是一个类似于 GitHub Pilot 的 VS Code 扩展，使用方式和体验差别不大。它提供由 AI 提供支持的智能自动完成代码建议，以提高开发人员的工作效率。', link: 'https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode' },
      { name: 'codeium', desc: 'codeium 是一个免费的基于 AI 的开发者工具，适用于几乎市面上所有的编辑器，免费的、超快的Copilot替代品', link: 'https://marketplace.visualstudio.com/items?itemName=Codeium.codeium' },
      { name: 'Bito AI', desc: 'Bito AI具有多种用例的 AI 助手工具。你可以使用它来生成代码、询问语法、生成测试用例、代码解释、注释生成、提高代码性能、检查安全性以及学习技术概念。', link: 'https://marketplace.visualstudio.com/items?itemName=Bito.Bito' },
      { name: 'Mintlify Doc Writer', desc: 'Mintlify Doc Writer是一个很棒的工具，它使用 AI 来记录你的代码。它以符合 JSDoc、reST、NumPy 等标准格式的注释形式为你的代码生成 AI 文档。', link: 'https://marketplace.visualstudio.com/items?itemName=mintlify.document' },
      { name: 'Code GPT', desc: 'Code GPT 可以生成代码、回答你的问题、显示来自 Stack Overflow 的最佳答案、解释你的代码、重构和记录你的代码、发现你的代码中的问题，并为其编写单元测试，所有这些都在 VS Code 窗口中。', link: 'https://marketplace.visualstudio.com/items?itemName=DanielSanMedium.dscodegpt' },
      { name: 'Kodezi AI', desc: '使用在各种开源项目上训练的大型语言模型来调试和优化你的代码，将代码从一种编程语言转换为另一种编程语言，通过给出指令生成文档和代码，并使用其聊天机器人 KodeziChat 回答你的所有问题。', link: 'https://marketplace.visualstudio.com/search?term=Kodezi%20AI&target=VSCode&category=All%20categories&sortBy=Relevance' },
    ]
  },
  {
    label: '实用工具', list: [
      { name: 'polacode', desc: 'vs code的一款代码截图美化插件，能够轻松创造出漂亮的代码截图。', link: 'https://marketplace.visualstudio.com/items?itemName=pnp.polacode' },
      { name: 'Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code', desc: '切换语言，安装完成后，默认显示英文，我们可以通过安装中文语言包插件来显示中文', link: '' },
      { name: 'Draw.io Integration', desc: '在VS code中绘制流程图，随时记录你的idea，不要太方便', link: 'https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio' },
      { name: 'Image Preview', desc: '当你引入时在左侧会显示图片的缩略图，方便预览', link: 'https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview' },
      { name: 'Markdown Preview Enhanced', desc: '在 VSCode 里编写 Markdown，支持预览', link: 'https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced' },
      { name: 'Sort lines', desc: '文本排序', link: 'https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines' },
      { name: 'Data Preview', desc: '预览数据文件', link: 'https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-preview' },
    ]
  },
  {
    label: '项目管理', list: [
      { name: 'Project Manager', desc: '多个项目之间快速切换多个项目之间快速切换', link: 'https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager' },
      { name: 'vscode-icons', desc: '会根据不同的文件类型添加不同的图标样式，看起来会更有趣', link: 'https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons' },
      { name: 'Git History', desc: '在VS code中集成git工具，查看git记录，文件历史记录，比较分支及提交代码等', link: 'https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory' },
      { name: 'Git Graph', desc: 'Git Graph是类似于SourceTree的可视化版本控制插件，可以更新、提交代码，查看提交记录，审视代码', link: 'https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph' },
      { name: 'GitHub Repositories', desc: 'GitHub Repositories是扩展允许您直接从 Visual Studio Code 中快速浏览、搜索、编辑和提交到任何远程 GitHub 存储库。', link: 'https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub' },
      { name: 'GitLens - Git supercharged', desc: '便于查看每行代码的提交记录，包括提交人、提交时间等，不知道哪位同学修改的代码，你可以试试，清晰明了', link: 'https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens' },
      { name: 'Svg Preview', desc: '方便svg文件预览', link: 'https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview' },
      { name: 'Project Tree', desc: '这是一个自动生成项目结构的插件.', link: 'https://marketplace.visualstudio.com/items?itemName=zhucy.project-tree' },
    ]
  },
  {
    label: '摸鱼神器', list: [
      { name: 'Power Mode', desc: '代码特效，当你敲代码时在光标上显示类似烟花的特效', link: 'https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode' },
      { name: '小霸王', desc: '一款在vscode里可以玩的超级玛丽', link: 'https://marketplace.visualstudio.com/items?itemName=gamedilong.anes' },
      { name: 'VSC Netease Music', desc: '网易云音乐-程序员版', link: 'https://marketplace.visualstudio.com/items?itemName=nondanee.vsc-netease-music' },
      { name: 'daily anime', desc: '追番插件', link: 'https://marketplace.visualstudio.com/items?itemName=deepred.daily-anime' },
      { name: 'Zhihu On VSCode', desc: '基于 VSCode 的知乎客户端提供包括阅读，搜索，创作，发布等一站式服务，内容加载速度比 Web 端更快，创新的 Markdown-Latex 混合语法让内容创作者更方便地插入代码块，数学公式，并一键发布至知乎平台。', link: 'https://marketplace.visualstudio.com/items?itemName=niudai.vscode-zhihu' },
      { name: '超越鼓励师', desc: '在 VS Code 中连续写代码一小时（时间可配置），会有杨超越提醒你该休息啦~', link: 'https://marketplace.visualstudio.com/items?itemName=formulahendry.ycy' },
      { name: '韭菜盒子', desc: 'VSCode 里也可以看股票 & 基金 & 期货实时数据，做最好用的投资插件', link: 'https://marketplace.visualstudio.com/items?itemName=giscafer.leek-fund' },
    ]
  },
  {
    label: '调试工具', list: [
      { name: 'REST Client', desc: '这个插件可以发送HTTP请求并查看响应结果，方便测试API接口和进行接口调试。', link: 'https://marketplace.visualstudio.com/items?itemName=humao.rest-client' },
      { name: 'open in browser', desc: 'html文件右击，通过浏览打开', link: 'https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser' },
    ]
  },
  {
    label: '数据库', list: [
      { name: 'SQLTools', desc: '数据库工具集，基本支持所有数据库类型', link: 'https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools' },
      { name: 'MySQL', desc: '支持 MySQL/MariaDB, Microsoft SQL Server, PostgreSQL, Redis, and ElasticSearch', link: 'https://marketplace.visualstudio.com/items?itemName=formulahendry.vscode-mysql' },
      { name: 'MongoDB for VS Code', desc: '在 VsCode 中 MongoDB 数据库支持', link: 'https://marketplace.visualstudio.com/items?itemName=mongodb.mongodb-vscode' },
    ]
  },
]
</script>

<style lang="scss" scoped>
.page-about-wrapper {
  flex: 1;
  padding: 0 5%;
  margin-top: 20px;
  a {
    display: -webkit-box; /* 将元素渲染为弹性伸缩盒模型 */
    -webkit-box-orient: vertical; /* 设置盒子内部元素排列方式为垂直方向 */
    -webkit-line-clamp: 1; /* 设置要显示的文本行数为2行 */
    overflow: hidden; /* 隐藏溢出的文本内容 */
    text-overflow: ellipsis; /* 显示省略号 */

    border-bottom: 1px dashed #ccc;
    line-height: 30px;
  }
  .desc {
    display: -webkit-box; /* 将元素渲染为弹性伸缩盒模型 */
    -webkit-box-orient: vertical; /* 设置盒子内部元素排列方式为垂直方向 */
    -webkit-line-clamp: 2; /* 设置要显示的文本行数为2行 */
    overflow: hidden; /* 隐藏溢出的文本内容 */
    text-overflow: ellipsis; /* 显示省略号 */
    max-height: 3.6em; /* 设置最大高度 */
    color: #5f5e5e;
  }
  .vs-col {
    margin-bottom: 10px;
  }
  :deep(.el-card__body) {
    padding: 10px;
  }
}
</style>